<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏显示</title>
</head>
<body>
<h3 style="cursor: pointer">点我全屏显示</h3>
<p>测试全屏显示测试全屏显示测试全屏显示测试全屏显示测试全屏显示测试全屏显示
    测试全屏显示测试全屏显示测试<br>
    全屏显示测试全屏显示测试全屏显示测试全屏显示测试全屏显示</p>
<script>
    //匿名函数
    (function () {
        //获取事件源和要全屏显示的元素
        var elem = document.querySelector("p");
        document.querySelector("h3").addEventListener("click",function(e){
           //判断浏览器是否支持全屏显示
            if (elem.webkitRequestFullScreen) {
                elem.webkitRequestFullScreen();
            } else if (elem.mozRequestFullScreen) {
                elem.mozRequestFullScreen();
            } else if (elem.requestFullScreen){
                elem.requestFullScreen();
            }else{
                console.log("浏览器不支持全屏显示")
            }
        });
    })()
</script>
</body>
</html>